<template>
    <div class="infoshow">
      <div class="row-bg">
          <el-row type="flex" class="row-bg" justify="center">
           <el-col :span='8' class="tx">
               <div class="user">
                    <img src="../assets/avatar.jpg" class='avatar' alt="">
               </div>
           </el-col>
           <el-col :span='16'>
             <div class="userinfobig">
              <div class="userinfo" >
                  <div class="user-item">
                      <span>姓名:</span>
                      <span>{{this.userDate.name}}</span>
                  </div>
                  <div class="user-item">
                      <span>学号:</span>
                      <span>{{this.userDate.number}}</span>
                  </div>
                  <div class="user-item">
                      <span>成绩:</span>
                      <span>{{this.userDate.score}}</span>
                  </div>
                  <div class="user-item">
                      <span>排名:</span>
                      <span>{{this.userDate.rank}}</span>
                  </div>
                  <div class="user-item">
                      <span>角色:</span>
                      <span>{{this.userDate.role}}</span>
                  </div>
                  <div class="user-item">
                      <el-button type="primary" size ="small" icon="view" @click='editInfo()'>修改</el-button>
                  </div>                  
               </div>
             </div>
                
           </el-col>
       </el-row>

      </div>
       <DialogUser :dialog='dialog' :form='form'  @update="getinfo"></DialogUser>
    </div>
</template>
<script>
import DialogUser from "../components/DialogUser.vue";

export default {
  name: "infoshow",
  data() {
    return {   
      userDate:[],
      dialog: {
        show: false,
      },
      form: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: ""
      }
    };
  },
  computed: {
    user() {
      return this.$store.getters.user;
    }
  },
  created() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      // 获取表格数据
      const url =this.$store.getters.user.id;
      this.$axios.get(`api/users/getinfo/${url}`).then(res => {
        this.userDate = res.data;        
      });
    },    
    editInfo() {
      // 编辑
      this.dialog = {
        show: true,
      };
      this.form = {
        number: this.userDate.number,
        name: this.userDate.name,
        role:this.userDate.role,
      };
    },
  },
  components: {
    DialogUser
  }
};
</script>
<style scoped>
.infoshow {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* padding: 16px; */
}
.row-bg {
  width: 100%;
  height: 100%;
}
.tx {
  text-align: center;
}
.user {
  text-align: center;
  position: relative;
  top: 30%;
}
.user img {
  position: relative;
  left: 30%;
  width: 150px;
  border-radius: 50%;
}
.user span {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}
.userinfo {
  height: 100%;
  background-color: #eee;
  text-align: center;
}
.userinfobig {
  height: 100%;
  background-color: #eee;
}
.user-item {
  position: relative;
  top: 20%;
  padding: 26px;
  font-size: 28px;
  color: #333;
}
</style>
